<template>
  <el-form ref="form" :model="user" :rules="rules" label-width="80px" label-position="top">
    <el-radio-group v-model="changeType" size="medium" style="width:100%" @change="changeRadio">
      <el-radio label="password" style="width:100%">
        <span class="riadoType">通过旧密码验证修改</span>
      </el-radio>
      <el-form-item label="旧密码" prop="oldPassword">
        <!-- <el-form-item label="旧密码" :prop="changeType ==='password'?'oldPassword':''"> -->
        <el-input
          :disabled="this.changeType == 'phone'"
          v-model="user.oldPassword"
          placeholder="请输入"
          show-password
          clearable
          auto-complete="off"
        />
      </el-form-item>
      <el-form-item label="新密码" prop="newOnePassword">
        <!-- <el-form-item label="新密码" :prop="changeType ==='password'?'newOnePassword':''"> -->
        <el-input
          :disabled="this.changeType == 'phone'"
          v-model="user.newOnePassword"
          placeholder="请输入"
          show-password
          clearable
          auto-complete="off"
        />
      </el-form-item>
      <el-radio label="phone" style="width:100%">
        <span class="riadoType">通过手机号验证修改</span>
      </el-radio>
      <el-form-item label="新密码" prop="newPassword">
        <!-- <el-form-item label="新密码" :prop="changeType ==='phone'?'newPassword':''"> -->
        <el-input
          :disabled="this.changeType == 'password'"
          v-model="user.newPassword"
          placeholder="请输入"
          show-password
          clearable
          auto-complete="off"
        />
      </el-form-item>
      <el-form-item label="验证码" prop="code">
        <!-- <el-form-item label="验证码" :prop="changeType ==='phone'?'code':''"> -->
        <el-input :disabled="this.changeType == 'password'" v-model="user.code" placeholder="请输入" style="width:75%" auto-complete="off" />
        <el-button :disabled="this.changeType == 'password'" class="codebutton" v-if="!isDisabled" @click="sendCode">获取验证码</el-button>
        <el-button class="codebutton disabled" v-if="isDisabled">{{codeTime}}s后重新获取</el-button>
      </el-form-item>
    </el-radio-group>

    <el-form-item class="buttonItem">
      <el-button @click="close">关闭</el-button>
      <el-button type="primary" @click="submit">保存</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { editPassword, updateUserPwd } from "@/api/system/user";
import axios from "axios";
export default {
  props: {
    user: {
      type: Object
    }
  },
  data () {
    // const equalToPassword = (rule, value, callback) => {
    //   if (this.user.newPassword !== value) {
    //     callback(new Error("两次输入的密码不一致"));
    //   } else {
    //     callback();
    //   }
    // };
    return {
      changeType: 'password',
      isDisabled: false,
      codeTime: 60,
      codeUuid: '',
      // 表单校验
      rules: {
        // iphone: [
        //   { required: true, message: "手机号码不能为空", trigger: "blur" },
        //   {
        //     pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
        //     message: "请输入正确的手机号码",
        //     trigger: "blur"
        //   }
        // ],
        oldPassword: [
          { required: true, message: "旧密码不能为空", trigger: "blur" },
        ],
        newOnePassword: [
          { required: true, message: "新密码不能为空", trigger: "blur" },
          { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }
        ],
        newPassword: [],
        code: []
      }
    };
  },
  methods: {
    sendCode () {
      axios.get(process.env.VUE_APP_BASE_API + '/captchaSMS', { params: { phonenumber: this.user.phonenumber } }).then(res => {
        if (res.data.code === 200) {
          this.codeUuid = res.data.uuid
          this.isDisabled = true;
          const codeTime = 60;
          let vm = this;
          let timer = window.setInterval(() => {
            if (vm.codeTime > 0 && vm.codeTime <= codeTime) {
              // 倒计时时不可点击
              vm.isDisabled = true
              // 计时秒数
              vm.codeTime--
            } else {
              // 倒计时完，可点击
              vm.isDisabled = false
              // 更新按钮文字内容
              // 清空定时器!!!
              clearInterval(timer)
              vm.codeTime = 60;
            }
          }, 1000)
        }
      })
    },
    changeRadio () {
      this.$refs['form'].clearValidate();
      if (this.changeType === 'phone') {
        this.$set(this.user, 'oldPassword', undefined)
        this.$set(this.user, 'newOnePassword', undefined)
        
        // this.user.newPassword = undefined
        // this.user.code = undefined
        this.rules.oldPassword = []
        this.rules.newOnePassword = []
        this.rules.newPassword = [{ required: true, message: "新密码不能为空", trigger: "blur" },
        { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }]
        this.rules.code = [{ required: true, message: "验证码不能为空", trigger: "blur" }]
      } else {
        this.$set(this.user, 'newPassword', undefined)
        this.$set(this.user, 'code', undefined)
        // this.user.oldPassword = undefined
        // this.user.newOnePassword = undefined
        this.rules.newPassword = []
        this.rules.code = []
        this.rules.oldPassword = [{ required: true, message: "旧密码不能为空", trigger: "blur" }]
        this.rules.newOnePassword = [{ required: true, message: "新密码不能为空", trigger: "blur" },
        { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }]
      }
      // console.log(this.user.newPassword)
    },
    submit () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.changeType === 'phone') {
            editPassword(this.user.phonenumber, this.user.newPassword, this.user.code, this.codeUuid).then(
              response => {
                if (response.code === 200) {
                  this.msgSuccess("修改成功");
                  this.$refs['form'].resetFields();
                } else {
                  this.msgError(response.msg);
                }
              }
            );
          }
          else {
            updateUserPwd(this.user.oldPassword, this.user.newOnePassword).then(res => {
              if (res.code === 200) {
                this.msgSuccess("修改成功");
                this.$set(this.user, 'newPassword', undefined)
                this.$set(this.user, 'code', undefined)
                this.$set(this.user, 'oldPassword', undefined)
                this.$set(this.user, 'newOnePassword', undefined)
                // this.$refs['form'].resetFields();
              } else {
                this.msgError(res.msg);
              }
            })
          }

        }
      });
    },
    close () {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.push({ path: "/index" });
    }
  }
};
</script>
<style lang="scss" scoped>
/deep/.el-form-item.is-required:not(.is-no-asterisk)
  > .el-form-item__label:before,
.el-form-item.is-required:not(.is-no-asterisk)
  .el-form-item__label-wrap
  > .el-form-item__label:before {
  content: '';
  margin-right: 0;
}
.el-form {
  margin: 8px 36px 8px 16px;
  .el-form-item {
    margin-bottom: 20px;
    margin-top: 20px;
    /deep/.el-form-item__label {
      font-family: Microsoft YaHei;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.65);
      letter-spacing: 0;
      line-height: 14px;
      font-weight: 500;
      padding: 0 0 14px 0;
    }

    .el-button--medium {
      font-family: PingFangSC-Regular;
      padding: 12px 34px;
    }
    .el-button + .el-button {
      margin-left: 26px;
    }
  }

  .buttonItem {
    margin-bottom: 48px;
    position: absolute;
    bottom: 0;
  }
}
/deep/.el-input--medium .el-input__inner {
  height: 40px;
  line-height: 40px;
}

.codebutton {
  width: calc(25% - 8px);
  background-color: #ffffff;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.85);
  letter-spacing: 0px;
  height: 40px;
  padding: 0 !important;
}

.disabled {
  color: #c0c4cc;
  cursor: not-allowed;
  background-image: none;
  background-color: #fff;
  border-color: #e6ebf5;
}

.riadoType {
  font-size: 16px;
}
</style>
